<template>
  <div class="water-info glass-panel">
    <div class="panel-header">
      <h3>水情信息</h3>
    </div>
    <div class="info-content">
      <div class="station-info">
        <h4>三门峡实测</h4>
        <div class="flow-value">1390 <span>m³/s</span></div>
        <div class="density">一 kg/m³</div>
      </div>
      <div class="station-info">
        <h4>花园口实测</h4>
        <div class="flow-value">735 <span>m³/s</span></div>
        <div class="density">一 kg/m³</div>
      </div>
      <div class="history-data">
        <div class="data-row">
          <span class="label">昨日</span>
          <div class="values">
            <div class="value-item">
              <span class="name">实测流量</span>
              <span class="value">936 m³/s</span>
            </div>
            <div class="value-item">
              <span class="name">平均流量</span>
              <span class="value">30 m³/s</span>
            </div>
            <div class="value-item">
              <span class="name">最大流量</span>
              <span class="value">989 m³/s</span>
            </div>
          </div>
        </div>
        <div class="data-row">
          <span class="label">未来</span>
          <div class="values">
            <div class="value-item">
              <span class="name">预报最大流量</span>
              <span class="value">1209 m³/s</span>
            </div>
            <div class="value-item">
              <span class="name">历时</span>
              <span class="value">72 h</span>
            </div>
            <div class="value-item">
              <span class="name">预报最高水位</span>
              <span class="value">262.32 m</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.glass-panel {
  background: rgba(13, 19, 35);
  border-radius: 4px;
  border: 1px solid rgba(63, 158, 255, 0.1);
  padding: 15px;
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
      rgba(63, 158, 255, 0) 0%,
      rgba(63, 158, 255, 0.3) 50%,
      rgba(63, 158, 255, 0) 100%
    );
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
      rgba(63, 158, 255, 0) 0%,
      rgba(63, 158, 255, 0.3) 50%,
      rgba(63, 158, 255, 0) 100%
    );
  }
}

.panel-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  
  h3 {
    color: #fff;
    font-size: 16px;
    margin: 0;
  }
}

.info-content {
  padding: 16px;
  
  .station-info {
    margin-bottom: 20px;
    
    h4 {
      color: rgba(255, 255, 255, 0.8);
      font-size: 14px;
      margin: 0 0 8px;
    }
    
    .flow-value {
      color: #3f9eff;
      font-size: 24px;
      font-weight: bold;
      
      span {
        font-size: 14px;
        margin-left: 4px;
      }
    }
    
    .density {
      color: rgba(255, 255, 255, 0.6);
      font-size: 12px;
      margin-top: 4px;
    }
  }
  
  .history-data {
    .data-row {
      margin-bottom: 16px;
      
      .label {
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
        display: block;
        margin-bottom: 8px;
      }
      
      .values {
        display: flex;
        gap: 16px;
        
        .value-item {
          flex: 1;
          
          .name {
            color: rgba(255, 255, 255, 0.6);
            font-size: 12px;
            display: block;
            margin-bottom: 4px;
          }
          
          .value {
            color: #3f9eff;
            font-size: 14px;
          }
        }
      }
    }
  }
}

.highlight {
  color: #3f9eff;
  text-shadow: 0 0 10px rgba(63, 158, 255, 0.5);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 1; }
}
</style> 